---
# title: "Outline"
title: "轮廓"
# description: "Utilities for controlling an element's outline."
description: "用于控制元素轮廓的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/outline'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { Heading } from '@/components/Heading'

export const classes = { plugin }

<!-- ## Remove outlines -->
## 移除轮廓

<!-- Use `outline-none` to hide the default browser outline on focused elements. -->

<!-- It is highly recommended to apply your own focus styling for accessibility when using this utility. -->

使用 `outline-none` 来隐藏焦点元素的默认浏览器轮廓。

强烈建议在使用这个功能时，应用您自己的焦点样式来实现可访问性。

```html amber
<template preview>
  <div class="flex space-x-6 justify-center">
    <input type="text" class="px-4 py-3 leading-5 border rounded-md" placeholder="Default focus style" />
    <input type="text" class="px-4 py-3 leading-5 border rounded-md focus:outline-none focus:ring focus:border-blue-400" placeholder="Custom focus style" />
  </div>
</template>

<input type="text"
  placeholder="Default focus style"
  class="..." />

<input type="text"
  placeholder="Custom focus style"
  class="**focus:outline-none focus:ring focus:border-blue-300** ..." />
```

<!-- The `outline-none` utility is implemented using a transparent outline under the hood to ensure elements are still visibly focused to [Windows high contrast mode](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/) users. -->
`outline-none` 功能类是使用透明的轮廓（transparent outline）来实现的，以确保元素在[ Windows 高对比度模式](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/)用户看来仍有明显的焦点。

<!-- ## Dotted outlines -->

<!-- Use the `outline-white` and `outline-black` utilities to add a 2px dotted border around an element with a 2px offset. These are useful as an accessible general purpose custom focus style if you don't want to design your own. -->
## 点状轮廓

使用 `outline-white` 和 `outline-black` 功能类在元素周围添加一个 2px 的点状边框，并有 2px 的偏移。如果您不想设计自己的风格，这些功能类可以作为一种通用的自定义焦点风格。

```html
<template preview class="flex">
  <div class="min-w-0 flex-1 bg-gray-100 p-10 flex items-center justify-center">
    <button type="button" class="px-6 py-3 rounded-md font-semibold bg-blue-600 text-white focus:outline-black">Button A</button>
  </div>
  <div class="min-w-0 flex-1 bg-blue-700 p-10 flex items-center justify-center">
    <button type="button" class="px-6 py-3 rounded-md font-semibold bg-white text-gray-900 focus:outline-white">Button B</button>
  </div>
</template>

<button class="**focus:outline-black** ...">Button A</button>
<button class="**focus:outline-white** ...">Button B</button>
```

<!-- ## Customizing -->
## 自定义

### Outlines

<!-- By default Tailwind provides three outline utilities. You can customize these by editing the `theme.outline` section of your `tailwind.config.js` file. -->
默认情况下，Tailwind 提供了三个 outline 功能类。您可以通过编辑您的 `tailwind.config.js` 文件中的 `theme.outline` 部分来定制这些功能类。

```js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        outline: {
          blue: '2px solid #0000ff',
        }
      }
    }
  }
```

<!-- You can also provide an `outline-offset` value for any custom outline utilities using a tuple of the form `[outline, outlineOffset]`: -->
您也可以使用 `[outline, outlineOffset]` 形式的元组为任何自定义的 outline 功能提供一个 `outlineOffset` (偏移)值。

```js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        outline: {
          blue: ['2px solid #0000ff', '1px'],
        }
      }
    }
  }
```

### Variants

<Variants plugin="outline" />

### Disabling

<Disabling plugin="outline" />
